<template>
	<view class="myPage bg-fff">
		<view class="tabBox">
            <view class="nav bg-fff col-theme flex">
                <block v-for="(btn,index) in navs" :key="index">
                    <view class="btn flex" :class="tabCurrent == index?'bg-theme col-fff':''" @click="bindNav(index)">{{btn.name}}</view>
                </block>
            </view>
			<view class="faqListBox">
                <block v-if="navItemList[tabCurrent].qaList.length > 0">
                    <block v-for="(item, index) in navItemList[tabCurrent].qaList" :key="index">
                        <question-item :item="item" :index="index" :showDelete="item.owner" @thumbSucc="thumbCallBack" @collectSucc="collectCallBack" @deleteSucc="deleteCallBack"></question-item>
                    </block>
                    <u-loadmore :status="navItemList[tabCurrent].loadingType" margin-top="10" />
					<u-gap height="40"></u-gap>
                </block>

				<u-empty mode="list" text="没有更多了" marginTop="100" v-if="navItemList[tabCurrent].qaList.length === 0 && navItemList[tabCurrent].loadingType === 'nomore'"></u-empty>
			</view>
		</view>
	</view>
</template>
<script>
    import QuestionItem from './components/question-item.vue';
	import { loadFaqList } from '@/common/api/my';
	export default {
        components:{
            QuestionItem
        },
		data() {
			return {
                firstLoad: true,
				tabCurrent: 0,
                navs: [{
                    name: '问题'
                },{
                    name: '回答'
                }],
				navItemList: [
					{
						next: '',
						param: 'question',
						loadingType: 'loadmore',
						qaList: []
					},
					{
						next: '',
						param: 'answer',
						loadingType: 'loadmore',
						qaList: []
					}
				]
			}
		},
        onShow() {
            if(!this.firstLoad) {
                this.reset();
                this.loadData();
            }
        },
		onLoad() {
		    let that = this;
            uni.$check_and_login(function () {
                that.loadData()
            })
		},
		onPullDownRefresh() {
			this.reset();
			this.loadData();
		},
		onReachBottom(){
			this.loadData()
		},
		methods: {
            //重置
			reset(){
				this.navItemList.forEach(item => {
					item.qaList = [];
					item.next = '';
					item.loadingType = 'loadmore'
				})
			},
            
            //加载问答列表
			async loadData(){
				let navItem = this.navItemList[this.tabCurrent];
				if(navItem.loadingType === 'loading' || navItem.loadingType === 'nomore') return;
				navItem.loadingType = 'loading';
				try{
					let url = navItem.next || `/product/mall/qa/v2/list/owner?type=${navItem.param}`;
					let res = await loadFaqList(url);
					if(res.status !== 0){
						uni.$u.toast(res.detail);
						return;
					}
					this.firstLoad = false;
					let { results, next } = res.detail;
					if (results.length > 0){
						navItem.qaList.push(...results)
					}
					navItem.next = next;
					navItem.loadingType = next ? 'loadmore' : 'nomore';
					uni.stopPullDownRefresh();
				}catch(err){
					uni.stopPullDownRefresh();
				}
			},
            
            //点赞回调
            thumbCallBack(index) {
                let currFAQ = this.navItemList[this.tabCurrent].qaList[index];
                currFAQ.love?currFAQ.like_num--:currFAQ.like_num++;
                currFAQ.love = !currFAQ.love;
            },
            
            //收藏回调
            collectCallBack(index) {
                let currFAQ = this.navItemList[this.tabCurrent].qaList[index];
                currFAQ.store?currFAQ.store_num--:currFAQ.store_num++;
                currFAQ.store = !currFAQ.store;
            },
            
            //删除回调
            deleteCallBack(id) {
				this.navItemList[this.tabCurrent].qaList = this.navItemList[this.tabCurrent].qaList.filter(item => item.id !== id);
            },

			//点击tab
			bindNav(index) {
                if(this.tabCurrent == index) return;
                this.tabCurrent = index;
                this.loadData();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myPage{
        line-height: 1;
		min-height: 100vh;
        overflow: hidden;
		position: relative;
		.tabBox{
            .nav{
                margin: 30rpx;
                border-radius: 10rpx;
                border: 1rpx solid $theme-color;
                overflow: hidden;
                .btn{
                    flex: 1;
                    height: 70rpx;
                }
            }
		}
	}
</style>
